<template>
  <div id="event">
    <ul>
      <li>--- Welcome to my site.</li>
      <li>--- Check the 'special' menu for courses.</li>
      <li>Imformation of courses that you have purchased:</li>
      <li style="border: 1px gray solid; padding: 20px">
        <p>course name: English</p>
        <p>Learning progress:</p>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="50" color="#333333" />
        <p>Correct rate:</p>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#333333" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Event',
  components: {},
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style scoped>
  * {
    margin: 0px;
    padding: 0px;
    color: white;
  }

  #event {
    text-align: left;
    padding: 30px 60px;
    font-size: 20px;
    line-height: 40px;
  }

  #event ul {
    list-style-type: none;
  }

  #event ul li{
    margin-bottom: 30px;
  }

  .el-button {
    margin: 5px;
    width: 100px;
    height: 50px;
    font-size: 15px;
    background-color: #323232;
  }
</style>
